<template>
  <div class="best-esult-dialog-content">
    
    <div class="nianhua">
      <img src="./../assets/imgs/cloud-left.png" class="left-cloud">
      <img src="./../assets/imgs/cloud-right.png" class="right-cloud">
      <img src="./../assets/imgs/yanhua-wave.gif" alt="" class="yanhua1">
      <img src="./../assets/imgs/yanhua-wave.gif" alt="" class="yanhua2">
      <div class="head">
        <h4>哇！你刷新了自己的最好成绩</h4>
      </div>
      <div class="result">
        <span v-for="(item,i) in animalNum" :key="i">
          {{item}}
        </span>
      </div>
      <div class="fridens-list">
        <p>好友排行榜</p>
        <div class="list-wrap">
          <ul>
            <li v-for="(item,i) in friends" ref="list">
                <div class="li-1">
                  <i class="huangguan" v-if="i===0"></i>
                  <span v-if="i<3">TOP</span>{{i+1}}
                </div>
                <img :src="item.head" class="li-2">
                <div class="li-3">{{item.name}}</div>
                <span class="li-4">{{item.result}}</span>
              </li>
          </ul>
        </div>
        
      </div>
      <div class="share">
        <img src="./../assets/imgs/catch-result/img_03_1.png" @click="share" >
        <img src="./../assets/imgs/catch-result/img_04_1.png" @click="choujiang" class="heartbeat">
      </div>
      <!-- <shake-hand></shake-hand> -->
    </div>
    <div class="close">
      <img src="./../assets/imgs/close-btn.png" @click="close">
    </div>
  </div>
</template>
<script>
import  ShakeHand from './shake-hand.vue'
import { Toast } from 'mint-ui'

export default {
  name: "bestResult",
  components:{
    ShakeHand
  },
  data () {
    return {
  
    };
  },
  computed:{
    animals(){
      return this.$store.state.animals
    },
    animalNum(){
      return  String(this.$store.state.bestAnimals).split('')
    },
    friends(){
      return this.$store.state.friends
    },
  },
  mounted(){
    
  },
  methods:{
    share(){
      this.$emit('share')
    },
    choujiang(){
      if( this.animals <15 ){
        Toast('抓到15只才能抽奖哦')
        //this.$store.commit('toast','加油加油，抓到15只就能抽奖哦')
      }else{
        this.$emit('openOther','Lotto')
      }
    },
    close(){
      this.$emit('close')
      this.$router.push({path:'/'})
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.best-esult-dialog-content{
  padding-top: px2rem(54);
  text-align: center;
  position: relative;
  .nianhua{
    // background-color: #fff;
    padding-left: px2rem(20);
    box-sizing: border-box;
    @include bg-img();
    //background-position-x: px2rem(-10);
    background-image: url('./../assets/imgs/nianhua_large.png');
    //height: px2rem(624);
    width: 90%;
    margin: 0 auto;
    padding-bottom: px2rem(60);
    position: relative;
    .yanhua1{
      position: absolute;
      top:px2rem(80);
      left:6%;
      transform: scale(.5);
    }
    .yanhua2{
      position: absolute;
      top:px2rem(240);
      right:10%;
      transform: scale(.8);
    }
    .head{
      padding-top: px2rem(100);
      h4{
        // margin: 0 auto;
        // display: inline-block;
        // @include bg-img();
        // padding: 0 px2rem(50);
        // line-height: px2rem(40);
        // height: px2rem(60);
        // font-size: px2rem(28);
        @extend .dialog-title;
        background-image: url('./../assets/imgs/nianhua-head.png');
      }
    }
    .result{
      span{
        background-image: url('./../assets/imgs/catch-result/img_03.png');
        display: inline-block;
        width: px2rem(206);
        height: px2rem(206);
        line-height: px2rem(206);
        @include bg-img();
        margin-left: px2rem(-80);
        color: $color-1;
        font-size: px2rem(94);
        &:first-of-type{
          margin-left: px2rem(16);
        }
      }
    }
    .fridens-list{
      background-image: url('./../assets/imgs/catch-result/img_02_1.png');
      @include bg-img();
      margin: 0 auto;
      box-sizing: border-box;
      padding: px2rem(20) px2rem(40);
      padding-top: px2rem(30);
      padding-bottom: px2rem(52);
      color: $color-1;
      width: px2rem(410);
      p{
        margin: 0;
        letter-spacing: 2px;
        text-align: left;
        font-size: px2rem(18);
        padding-bottom: px2rem(8);
        border-bottom: 1px solid $color-1;
      }
      .list-wrap{
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
        white-space:nowrap;
        text-align: left;
        ul{
          max-width: 1000%;
          text-align: left;
          list-style: none;
          margin: 0;
          padding: 0;
          margin-top: px2rem(10);
          li{
            text-align: center;
            display: inline-block;
            white-space:nowrap;  
            margin-left: px2rem(38);
            &:first-child{
              margin-left: 0;
            }
            .li-1{
              vertical-align: top;
              font-size:px2rem(18);
              line-height: px2rem(26);
              font-weight: bold;
              i{
                //vertical-align: middle;
                display: inline-block;
                @include bg-img();
                width: px2rem(24);
                height: px2rem(20);
                background-image: url('./../assets/imgs/catch-result/img_05.png');
              }
              
            }
            .li-2{
              
              width:px2rem(80);
              height: px2rem(80);
              // background-color: red;
              border-radius: px2rem(4);
            }
            .li-3{
              font-size: px2rem(16);
              //@include font-dpr(18px);
              margin-top: px2rem(0);
              //margin-bottom: px2rem(6);
              //letter-spacing: 1px;
              color: #8a5045;
              width:px2rem(80);
              @extend .only-one-line;
            }
            .li-4{
              font-size: px2rem(18);
              //@include font-dpr(32px);
              padding: px2rem(2) px2rem(20);
              border-radius: px2rem(32);
              background-color: $color-1;
              color: #fff;
              margin-bottom: px2rem(2);
            }
          }
        }
      }
    }
    .share{
      margin-top: px2rem(20);
      img{
        height: px2rem(68);
      }
    }
  }
  .close{
    margin-top: px2rem(32);
    img{
      height: px2rem(80);
    }
  }
  .hand-img{
    bottom:px2rem(120);
    right:px2rem(80);
  }
}
</style>